<!DOCTYPE html>
<html>

<head>
    <title>Icicle</title>
    <script src="d3.min.js"></script>
</head>

<body>
    <svg width="1000" height="3000" id="mainsvg" class="svgs" style="display: block; margin: auto;"></svg>
    <script>
        const svg = d3.select('#mainsvg');
        const width = +svg.attr('width');
        const height = +svg.attr('height');
        const g = svg.append('g')
        //.attr('transform', `translate(${width/2}, ${height/2})`);
        let root;

        const render = function (data) {
            // Setting the domain on an ordinal scale is optional 
            // if the unknown value is implicit (the default). 
            // In this case, the domain will be inferred implicitly 
            // from usage by assigning each unique value passed to 
            // the scale a new value from the range. 
            const color = d3.scaleOrdinal(d3.schemeCategory10)
            //.domain( data.descendants().filter( d => d.depth !== 1 ).map( d => d.data.name ) );
            const fill = d => {
                if (!d.depth) return "#666666";
                while (d.depth > 1)
                    d = d.parent;
                return color(d.data.name);
            };

            g.selectAll('.datarect')
            .data(root.descendants())
            .join('rect')
            .attr('class', 'datarect')
            .attr('x', d => d.y0)
            .attr('y', d => d.x0)
            .attr('height', d => d.x1 - d.x0)
            .attr('width', d => d.y1 - d.y0)
            .attr("fill", fill);

            g.selectAll('.datatext')
            .data(root.descendants().filter(d => (d.x1 - d.x0) > 50))
            .join('text')
            .attr('class', 'datatext')
            .attr('text-anchor', 'middle')
            .attr('x', d => (d.y0 + d.y1) / 2)
            .attr('y', d => (d.x0 + d.x1) / 2)
            .attr('dy', '0.35em')
            .attr('font-size', '1em')
            .text(d => d.data.name)
        }

        d3.json('xinjiang.json').then(data => {
            let hiedata = d3.hierarchy(data)
            .sum(d => d.population).sort((a, b) => b.population - a.population);
            root = d3.partition().size([height, width])(hiedata);
            render(root);
        });

    </script>
</body>

</html>